<template>
  <div class="box" id="ywx">
    <div class="header" id="header">个人中心</div>
    <div class="content" style="background:#e5e5e5;" id="content">
      <div class="msg">
        <div v-if="flag" @click="toRegister">
          <!-- <van-uploader
            v-model="fileList"
            multiple
            :max-count="1"
          /> -->
            <div class="portrait">
              <img src="https://static.smartisanos.cn/account/asset/img/default-user-avatar.png" alt />
            </div>
          <!-- </van-uploader> -->
          <div class="tel">
            <span>登录/注册</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
        <div v-else @click="toAccount">
          <div class="portrait">
            <el-upload
                 class="avatar-uploader"
                 action="https://jsonplaceholder.typicode.com/posts/"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess"
                 :before-upload="beforeAvatarUpload">
                 <img v-if="imageUrl" :src="imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>

          </div>
          <div class="tel">
            <span>{{ tel }}</span>
            <i class="iconfont icon-youjiantou"></i>
          </div>
        </div>
      </div>
      <ul class="nav">
        <li @click="toAll">
          <i class="iconfont icon-6"></i>
          <p>全部订单</p>
        </li>
        <li @click="toUnpay">
          <i class="iconfont icon-daifukuan"></i>
          <p>待付款</p>
        </li>
        <li @click="toUndone">
          <i class="iconfont icon-daishouhuo"></i>
          <p>待收货</p>
        </li>
        <li @click="toEnd">
          <i class="iconfont icon-shouhou"></i>
          <p>售后</p>
        </li>
      </ul>
      <ul class="utils">
        <li>
          <router-link to='/address' tag="a">地址管理</router-link>
          <i class="iconfont icon-youjiantou"></i>
        </li>
        <li>
          <a href="##">我的优惠券</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
        <li>
          <a href="##">优先购买码</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
      </ul>
      <ul class="utils">
        <li>
          <a href="##">以旧换新</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
        <li>
          <a href="##">常见问题</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
        <li>
          <a href="##">服务支持</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
      </ul>
      <ul class="utils">
        <li>
          <a href="##">意外碎屏保修服务</a>
          <i class="iconfont icon-youjiantou"></i>
        </li>
        <li>
          <a href="##" class="">延长保修服务</a>
          <i class="iconfont icon-youjiantou "></i>
        </li>
        <li>
           <el-button @click="drawer = true" type="warning" style="margin-left: 16px;" class="el-icon">
  关于我们
</el-button>
        </li>
      </ul>
    </div>

<el-drawer
  title="XYL组织介绍"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose"
  :wrapperClosable='false'
  class=""
  size='60%'>
   <el-button @click="show1 = !show1" style="display:block"><div class="">徐石坡<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div></el-button>
   <transition name="el-zoom-in-center">
        <div v-show="show1" class="transition-box" ><el-alert
    title="资深前端开发工程师,从事前端3年有余,露点组织掌门人,炸天帮骨干成员。负责模块：首页、项目上线与后期制作！"
    type="success"  :closable="false">
  </el-alert></div>
      </transition>
   <el-button @click="show2 = !show2" style="display:block"><div>余文祥<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div></el-button>
   <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box" ><el-alert
    title="知名企业，上市公司前端顾问，精通各种前后端语言，年轻有为。负责模块：登录注册、个人中心与订单模块！"
    type="warning"  :closable="false"></el-alert></div>
      </transition>
   <el-button @click="show3 = !show3" style="display:block"><div>刘德辉<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div></el-button>
   <transition name="el-zoom-in-center">
        <div v-show="show3" class="transition-box"><el-alert
    title="组织内职业搬运工，兽人苦丁的地位。负责模块：分类详情、地址管理与购物车模块"
    type="error"  :closable="false"></el-alert></div>
      </transition>
      <div class="email" style="position:absolute;bottom:0px;height:100px">
   <el-button type="info" @click="show4 = !show4" icon="el-icon-message" circle></el-button>
   <transition name="el-zoom-in-center">
        <div v-show="show4" class="transition-box"><el-alert
    title="联系信箱745404949@qq.com"
    type="info"  :closable="false"></el-alert></div>
      </transition>
      </div>
</el-drawer>
</div>
</template>

<script>
// import axios from 'axios'
import Vue from 'vue'
import { Uploader, Toast } from 'vant'
import axios from '@/utils/request'
Vue.use(Toast)
Vue.use(Uploader)
export default {
  data () {
    return {
      tel: '',
      fileList: [],
      drawer: false,
      direction: 'rtl',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      imageUrl: 'https://static.smartisanos.cn/account/asset/img/default-user-avatar.png',
      flag: false
    }
  },
  // watch: {
  //   flag (newVal) {
  //     if (newVal) {
  //       this.flag = true
  //     } else {
  //       this.flag = false
  //     }
  //   }
  // },
  methods: {
    toRegister () {
      // this.$router.replace('/register-login')
      this.$router.push('/register-login')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        }).catch(_ => {})
      // this.$router.push('/register-login')
    },
    toAll () {
      if (!this.flag) {
        this.$router.push('/order?status=3')
      } else {
        Toast('未登录，请登录')
        this.$router.push('/register-login')
      }
    },
    toUnpay () {
      // this.$router.push('/order?status=0')
      if (!this.flag) {
        this.$router.push('/order?status=0')
      } else {
        Toast('未登录，请登录')
        this.$router.push('/register-login')
      }
    },
    toUndone () {
      // this.$router.push('/order?status=1')
      if (!this.flag) {
        this.$router.push('/order?status=1')
      } else {
        Toast('未登录，请登录')
        this.$router.push('/register-login')
      }
    },
    toEnd () {
      // this.$router.push('/order?status=2')
      if (!this.flag) {
        this.$router.push('/order?status=2')
      } else {
        Toast('未登录，请登录')
        this.$router.push('/register-login')
      }
    },
    // 头像上传函数
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
      // this.$router.push('/order?status=2')
    },
    toAccount () {
      this.$router.push('/account?userid=' + localStorage.getItem('userid'))
    }
  },
  created () {
    // localStorage.removeItem('token')
    // let userid = localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
    // // console.log(userid)
    let userid = localStorage.getItem('userid')
    console.log(111)
    // if (userid !== '') {
    axios.get('/users/msg?userid=' + userid).then(res => {
    // axios.get('/users/msg?token=' + localStorage.getItem('token') + '&userid=' + userid).then(res => {
      console.log(1, res.data)
      if (res.data.code === '10020') {
        // localStorage.removeItem('token')
        this.flag = false
        this.tel = res.data.username
        if (this.tel.length > 7) {
          this.tel = res.data.username.replace(/^(.{3}).*(.{4})$/, '$1****$2')
        }
      } else {
        this.flag = true
        console.log('ai')
      }
    })
  }
}
</script>

<style lang="scss">
@import "@/lib/reset.scss";
#ywx{
#header {
  @include rect(100%,0.44rem);
  @include background-color(#1d1d1d);
  @include font-size(0.20rem);
  @include font-weight(bolder);
  @include line-height(0.44rem);
  @include text-align(center);
  @include color(#fff);
}
#content {
  @include background-color(#e5e5e5);
  .msg>div {
    @include flexbox();
    @include align-items(center);
    @include rect(94%, 0.8rem);
    @include border-radius(0.08rem 0.08rem 0 0);
    @include background-color(#fff);
    @include margin(0.15rem auto 0);
    @include border(0 0 1px, #666, solid);
    .portrait {
      @include rect(0.55rem, 0.55rem);
      @include margin(0 0.2rem);
      img {
        @include rect(100%, 100%);
        @include border-radius(50%);
        @include display(block);
      }
    }
    .tel {
      @include flex();
      @include flexbox();
      @include justify-content(space-between);
      span {
        @include font-size(0.18rem);
      }
      i {
        @include margin(0 0.1rem 0 0);
        @include color(#333);
      }
    }
  }
  .nav {
    @include rect(94%, 0.7rem);
    @include margin(0 auto);
    @include border-radius(0 0 0.08rem 0.08rem);
    @include background-color(#fff);
    @include flexbox();
    li {
      @include flex();
      @include flexbox();
      @include flex-direction(column);
      @include align-items(center);
      @include justify-content(center);
      &:active {
        @include background-color(#779ef1);
      }
      p {
        @include font-size(0.12rem);
      }
      i {
        @include font-size(0.2rem);
        @include color(#aaa);
        @include margin(0 0 0.03rem);
      }
    }
  }
  .utils {
    @include rect(94%, auto);
    @include border-radius(0.08rem);
    @include background-color(#fff);
    @include margin(0.15rem auto 0);
    li {
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      @include rect(100%, 0.6rem);
      @include border(0 0 1px, #ccc, solid);
      a {
        @include flex();
        @include font-size(0.18rem);
        @include color(#333);
        text-indent: 0.2rem;
      }
      i {
        @include margin(0 0.1rem 0 0);
        @include color(#333);
      }
    }
  }
}
}
.el-message-box{
  width:50%
}
</style>
